<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>后台管理</title>
	<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
	<link rel="stylesheet" type="text/css" href="css/adminlte.min.css">
	<link rel="stylesheet" type="text/css" href="css/all.min.css">
	<link rel="stylesheet" type="text/css" href="css/toastr.min.css">
	<link rel="stylesheet" type="text/css" href="css/sweetalert2.min.css">
	<link rel="stylesheet" type="text/css" href="css/select2.min.css">
	<style type="text/css">
		:not(.layout-fixed) .main-sidebar {
		    height: inherit;
		    min-height: 100%;
		    position: fixed;
		    bottom: 0;
		    top: 0;
		}
		.error{
			margin-bottom: 0
		}
		.imgMask{
			width: 128px;
			height: 96px;
			background-color: black;
			opacity: 0.6;
			z-index: 9999; 
			display: none;
		}
	</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
	  <!-- Navbar -->
	  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
	    <!-- Left navbar links -->
	    <ul class="navbar-nav">
	      <li class="nav-item">
	        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
	      </li>
	      <li class="nav-item d-none d-sm-inline-block">
	        <a href="" class="nav-link">Home</a>
	      </li>
	    </ul>

	    <!-- Right navbar links -->
	    <ul class="navbar-nav ml-auto">
	      <li class="nav-item">
	        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
	          <i class="fas fa-th-large"></i>
	        </a>
	      </li>
	    </ul>
	  </nav>
	  <!-- /.navbar -->
	  <!-- Main Sidebar Container -->
	  <aside class="main-sidebar sidebar-dark-primary elevation-4">
	    <!-- Brand Logo -->
	    <a href="" class="brand-link">
	      <span class="brand-text font-weight-light" style="margin: 0 auto">后台管理</span>
	    </a>

	    <!-- Sidebar -->
	    <div class="sidebar">
	      <!-- Sidebar user (optional) -->
	      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
	        <div class="image">
	          <img src="images/panda.png" class="img-circle elevation-2" alt="User Image">
	        </div>
	        <div class="info">
	          <a href="#" class="d-block">admin</a>
	        </div>
	      </div>

	      <!-- Sidebar Menu -->
	      <nav class="mt-2">
	        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
	          <li class="nav-item has-treeview">
	            <a href="#" class="nav-link">
	              <i class="nav-icon fas fa-tachometer-alt"></i>
	              <p>美食地图<i class="right fas fa-angle-left"></i></p>
	            </a>
	            <ul class="nav nav-treeview">
	              <li class="nav-item">
	                <a href="../../index.html" class="nav-link">
	                  <i class="far fa-circle nav-icon"></i>
	                  <p>商家管理</p>
	                </a>
	              </li>
	            </ul>
	          </li>
	        </ul>
	      </nav>
	      <!-- /.sidebar-menu -->
	    </div>
	    <!-- /.sidebar -->
	  </aside>
	  <div class="content-wrapper">
  		<!-- Content Header (Page header) -->
  		<section class="content-header">
  		  <div class="container-fluid">
  		    <div class="row mb-2">
  		      <div class="col-sm-6">
  		        <h4>
  		          商家管理 
  		        </h4>
  		      </div>
  		      <div class="col-sm-6">
  		        <ol class="breadcrumb float-sm-right">
  		          <li class="breadcrumb-item"><a href="#">Home</a></li>
  		          <li class="breadcrumb-item"><a href="#">美食地图</a></li>
  		          <li class="breadcrumb-item active">商家管理</li>
  		        </ol>
  		      </div>
  		    </div>
  		  </div><!-- /.container-fluid -->
  		</section>
  		<section class="content">
  		  <div class="container-fluid">
  		  	<div class="row">
		        <div class="col-12">
		          <div class="card">
		            <div class="card-header">
		            	<div class="row">
		            		<div class="col-3"><h3 class="card-title" style="margin-top: 8px">商家列表</h3></div>
		            		<div class="col-7"></div>
		            		<div class="col-2">
		            			<button type="button" class="btn btn-block bg-gradient-primary" id="addBusInfo" data-toggle="modal" data-target="#myModal1" onclick="jsOpenModal()">添加商家</button>
		            		</div>
		            	</div>
		            	
		              
		            </div>
		            <!-- /.card-header -->
		            <div class="card-body">
		              <table id="example2" class="table table-bordered table-hover">
		                <thead>
		                <tr>
		                  <th>商家图像</th>
		                  <th>商家名称</th>
		                  <th>更新时间</th>
		                  <th>电话</th>
		                  <th>地址</th>
		                  <th>星级</th>
		                  <th>操作</th>
		                </tr>
		                </thead>
		                <tbody>
		                @foreach($busInfoList as $busInfo)
		                <tr>
		                  <td><img style="width: 86px;height: 64px" src="{{$busInfo->imgUrl}}"></td>
		                  <td>{{$busInfo->name}}</td>
		                  <td>{{$busInfo->create_time}}</td>
		                  <td>{{$busInfo->tel}}</td>
		                  <td>{{$busInfo->address}}</td>
		                  <td>5</td>
		                  <td>
		                  	<div class="btn-group">
		                  	  <input type="hidden" class="dataIdInput" name="dataId" value="{{$busInfo->id}}">
		                  	  <button type="button" class="btn btn-info edit" data-id="{{$busInfo->id}}" data-name="{{$busInfo->name}}" data-address="{{$busInfo->address}}" data-tel="{{$busInfo->tel}}" data-stars="{{$busInfo->stars}}" data-longitude="{{$busInfo->longitude}}" data-latitude="{{$busInfo->latitude}}" data-imgurl="{{$busInfo->imgUrl}}" data-ishot="{{$busInfo->isHot}}">
		                  	  	<i class="fas fa-align-left fa-edit"></i>
		                  	  </button>
		                  	  <button type="button" class="btn btn-danger delete" data-id="{{$busInfo->id}}" data-name="{{$busInfo->name}}"><i class="fas fa-align-center fa-trash"></i></button>
		                  	</div>
			              </td>
		                </tr>
		                @endforeach
		                </tbody>
		              </table>
		            </div>
		            <!-- /.card-body -->
		          </div>
		        </div>
  		  </div>
  		</section>
	  </div>

	  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="myModalLabel">
                            添加商家
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                    </div>
                    <div class="modal-body" style="padding: 0">
                        <form role="form" id="form1" enctype="multipart/form-data" method="post">
                          <div class="card-body">
                            <div class="form-group">
                              <label for="exampleInputEmail1">商家名称</label>
                              <input type="text" class="form-control" name="name" placeholder="请输入商家名称"/>
                            </div>
                            <div class="form-group">
                              <label for="exampleInputPassword1">商家电话</label>
                              <input type="number" class="form-control" name="tel" placeholder="请输入商家电话"/>
                            </div>
                            <div class="form-group">
                              <label for="exampleInputPassword1">商家地址</label>
                              <input type="text" class="form-control" name="address" placeholder="请输入商家地址"/>
                            </div>
                            <div class="form-group">
                            	<div class="row">
                            		<div class="col-6">
                            			<label for="exampleInputPassword1">经度</label>
                            			<input type="number" class="form-control" name="longitude" placeholder="请输入经度"/>
                            		</div>
                            		<div class="col-6">
                            			<label for="exampleInputPassword1">纬度</label>
                            			<input type="number" class="form-control" name="latitude" placeholder="请输入纬度"/>
                            		</div>
                            	</div>
                            </div>
                            <div class="form-group">
                              <label>星级</label>
                              <select class="form-control select2bs4" name="stars">
                                <option selected>5</option>
                                <option>4</option>
                                <option>3</option>
                                <option>2</option>
                                <option>1</option>
                              </select>
                            </div>
                            <div class="form-group">
                            	<label for="imgUrl">商家头像</label>
                                <div  id="busInfoImg1" style="width: 128px;height: 96px;background-size: 128px 96px;background-repeat: no-repeat;background-image: url('images/noImg.png')">
                                	<div class="imgMask" id="imgMask1" type="button">
                                		<input type="file" class="" id="img" name="imgUrl" style="opacity: 0;width: 128px;height: 96px"  value="">
                                		<span style="display: block;margin-top: -60px; opacity: 1;color: white; text-align: center;">选择</span>

                                	</div>
                                </div>
                            </div>
                            <div class="form-check">
                              <input type="checkbox" class="form-check-input" name="isHot" value="1"/>
                              <label class="form-check-label" for="exampleCheck1">设为热门商家</label>
                            </div>
                          </div>
                          <!-- /.card-body -->
                          <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                              </button>
                              <button type="submit" class="btn btn-primary" id="submit">
                                  提交
                              </button>
                          </div>
                        </form>
                    </div>
                    
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabe2">
                            修改商家信息
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                    </div>
                    <div class="modal-body" style="padding: 0">
                        <form role="form" id="form2">
                          <div class="card-body">
                            <div class="form-group">
                              <label for="exampleInputEmail1">商家名称</label>
                              <input type="text" class="form-control" id="name1" placeholder="请输入商家名称" name="name" value="">
                            </div>
                            <div class="form-group">
                              <label for="exampleInputPassword1">商家电话</label>
                              <input type="number" class="form-control" id="tel1" placeholder="请输入商家电话" name="tel" value="">
                            </div>
                            <div class="form-group">
                              <label for="exampleInputPassword1">商家地址</label>
                              <input type="text" class="form-control" id="address1" placeholder="请输入商家地址" name="address" value="">
                            </div>
                            <div class="form-group">
                            	<div class="row">
                            		<div class="col-6">
                            			<label for="exampleInputPassword1">经度</label>
                            			<input type="number" class="form-control" id="longitude1" name="longitude" placeholder="请输入经度" value="海底捞">
                            		</div>
                            		<div class="col-6">
                            			<label for="exampleInputPassword1">纬度</label>
                            			<input type="number" class="form-control" id="latitude1" name="latitude" placeholder="请输入纬度" value="海底捞">
                            		</div>
                            	</div>
                            </div>
                            <div class="form-group">
                              <label>星级</label>
                              <select class="form-control select2bs4" id="stars1" name="stars">
                                <option selected>5</option>
                                <option>4</option>
                                <option>3</option>
                                <option>2</option>
                                <option>1</option>
                              </select>
                            </div>
                            <div class="form-group">
                              <label for="imgUrl">商家头像</label>
                              <div class="row">
                              	<div class="col-6">
                              		<div  id="busInfoImg" style="width: 128px;height: 96px;background-size: 128px 96px;background-repeat: no-repeat">
                              			<div class="imgMask" id="imgMask" type="button">
                              				<input type="file" class="" id="img1" name="imgUrl" style="opacity: 0;width: 128px;height: 96px"  value="">
                              				<span style="display: block;margin-top: -60px; opacity: 1;color: white; text-align: center;">替换</span>

                              			</div>
                              		</div>
                              		
                              	</div> 
                              	<div class="col-6">
                              		<div class="form-check">
                              		  <input type="checkbox" class="form-check-input" id="isHot1" name="isHot" value="1">
                              		  <label class="form-check-label" for="exampleCheck1">设为热门商家</label>
                              		</div>
                              	</div>
                              </div>  
                            </div>
                            
                          </div>
                          <!-- /.card-body -->
                          <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                              </button>
                              <button type="submit" class="btn btn-primary" id="submit1" data-id="">
                                  提交
                              </button>
                          </div>
                        </form>
                    </div>
                    
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.serializejson.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="js/adminlte.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
  $(function () {
    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": false,
      "info": true,
      "autoWidth": false,
      'pageLength':5
    });

 	$("#form1").validate({
 		onsubmit:true,
		submitHandler:function() {
	    	var formData = new FormData($('#form1')[0]);
	    	$.ajax({
	    		'url':'addBusInfo',
	    		'data': formData,
	    		'type':'post',
	    		'processData':false,
	    		'contentType' : false,
	    		'success':function(data){
	    			var data = $.parseJSON(data)
	    			alert(data.msg);
	    			if(data.status == 1){
	    				$('#myModal1').modal('hide');
	    				window.location.reload();
	    			}
	    			
	    		}
	    	}); 
	     },
	    rules: {
	      name: "required",
	      address: "required",
	      tel: "required",
	      longitude: "required",
	      latitude: "required",
	      imgUrl:"required"
	      
	    },
	    messages: {
	      name: "<i style='color:red;font-size:0.3rem'>*商家名称不能为空</i>",
	      address: "<i style='color:red;font-size:0.3rem'>*商家地址不能为空</i>",
	      tel: "<i style='color:red;font-size:0.3rem'>*商家电话不能为空</i>",
	      longitude: "<i style='color:red;font-size:0.3rem'>*经度不能为空</i>",
	      latitude: "<i style='color:red;font-size:0.3rem'>*纬度不能为空</i>",
	      imgUrl:"<i style='color:red;font-size:0.3rem'>*商家图像不能为空</i>"
	     }
	 });

 	$("#form2").validate({
 		onsubmit:true,
		submitHandler:function() {
	    	var id = $('#submit1').data('id');
	    	var formData = new FormData($('#form2')[0]);
	    	console.log(formData);
	    	$.ajax({
	    		'url':'updateBusInfo/'+id,
	    		'data': formData,
	    		'type':'post',
	    		'processData':false,
	    		'contentType' : false,
	    		'success':function(data){
	    			var data = $.parseJSON(data)
	    			alert(data.msg);
	    			if(data.status = 1){
	    				$('#myModal1').modal('hide');
	    				window.location.reload();
	    			}
	    			
	    		}
	    	});
	     },
	    rules: {
	      name: "required",
	      address: "required",
	      tel: "required",
	      longitude: "required",
	      latitude: "required"
	      
	    },
	    messages: {
	      name: "<i style='color:red;font-size:0.3rem'>*商家名称不能为空</i>",
	      address: "<i style='color:red;font-size:0.3rem'>*商家地址不能为空</i>",
	      tel: "<i style='color:red;font-size:0.3rem'>*商家电话不能为空</i>",
	      longitude: "<i style='color:red;font-size:0.3rem'>*经度不能为空</i>",
	      latitude: "<i style='color:red;font-size:0.3rem'>*纬度不能为空</i>"
	     }
	 });

    $('.edit').on('click',function(){
    	var id = $(this).data('id');
    	var imgUrl = $(this).data('imgurl');
		console.log(imgUrl);
    	$('#name1').val($(this).data('name'));
    	$('#address1').val($(this).data('address'));
    	$('#tel1').val($(this).data('tel'));
    	$('#longitude1').val($(this).data('longitude'));
    	$('#latitude1').val($(this).data('latitude'));
    	// $('#busInfoImg').attr('src',imgUrl);
    	$('#busInfoImg').css('background-image','url('+imgUrl+')');
    	$('#submit1').data('id',id);
    	if($(this).data('ishot') == '1'){
    		$('#isHot1').prop('checked',true);
    	}
    	$('#myModal2').modal('toggle');
    	
    });
    $('.delete').on('click',function(){
    	var id = $(this).data('id');
    	var res = confirm('确认删除['+$(this).data('name')+']吗？');
    	if(res == true){
    		$.ajax({
    			'url':'deleteBusInfo/'+id,
    			'type':'get',
    			'success':function(data){
    				var data = $.parseJSON(data)
    				alert(data.msg);
    				$('#myModal1').modal('hide');
    				if(data.status = 1){
    					window.location.reload();
    				}
    				
    			}
    		});
    	}
    	
    });
    $('#busInfoImg').hover(function(){
    	$('#imgMask').show();
    },function(){
    	$('#imgMask').hide();
    });
    $('#busInfoImg1').hover(function(){
    	$('#imgMask1').show();
    },function(){
    	$('#imgMask1').hide();
    });
    $("#img1").change(function(){
    	var imgUrl = URL.createObjectURL($(this)[0].files[0])
    	$('#busInfoImg').css('background-image','url('+imgUrl+')');
    });
    $("#img").change(function(){
    	var imgUrl = URL.createObjectURL($(this)[0].files[0])
    	$('#busInfoImg1').css('background-image','url('+imgUrl+')');
    });



  });

  	function jsOpenModal() {
        $('#myModal1').modal('toggle');//手动打开模态框。
    }

    function jsOpenModal2() {
        $('#myModal2').modal('toggle');//手动切换模态框。   还有一个modal('hide')	手动隐藏模态框。
    }
</script>
</body>
</html>